<template>
  <div>
    <nav-header></nav-header>
    <bread>
      <span slot="t1">Goods</span>
      <span slot="t2">test</span>
    </bread>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" class="price">Price
            <svg class="icon icon-arrow-short">
              <use xlink:href="#icon-arrow-short"></use>
            </svg>
          </a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" @click="priceChecked='all'" v-bind:class="{'cur':priceChecked=='all'}">All</a></dd>
              <dd v-for="(price,index) in priceFilter" @click="setPriceFilter">
                <a href="javascript:void(0)" v-bind:class="{'cur':priceChecked==index}">{{price.startPrice}} - {{price.endPrice}}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="(item,index) in goodList">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/'+item.productImg" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">{{item.prodcutPrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click="addCart(item.id)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
    <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
      <p slot="message">
        请先登录，否则无法加入购物车
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="mdShow=false">关闭</a>
      </div>
    </modal>
    <modal v-bind:mdShow ="mdShowCart" v-on:close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xlink:href="#icon-status-ok"></use>
        </svg>
        加入购物车成功
      </p>
      <div slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="mdShowCart=false">继续购物</a>
        <router-link class="btn btn--m" href="javascript:;" to="/cart">查看购物车</router-link>
      </div>
    </modal>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
    import './../assets/css/base.css'
    import './../assets/css/product.css'
    import './../assets/css/login.css'

    import NavHeader from './../components/Header'
    import NavFooter from './../components/Footer'
    import Bread from './../components/Bread'
    import Modal from './../components/Modal'

    import axios from 'axios'
    export default {
        data() {
            return {
              goodList: [],
              priceFilter:[
                {
                  startPrice:'0.00',
                  endPrice:'500.00'
                },
                {
                  startPrice:'500.00',
                  endPrice:'1000.00'
                },
                {
                  startPrice:'1000.00',
                  endPrice:'2000.00'
                }
              ],
              priceChecked:'all',
              filterBy:false,
              overLayFlag:false,
              mdShow:false,
              mdShowCart:false
            }
        },
        components:{
          NavHeader,
          NavFooter,
          Bread,
          Modal
        },
        mounted:function () {
          this.getGoodLists();
        },
        methods:{
          getGoodLists(){
            axios.get("/ytmall/goods/find")
              .then((result)=>{
                console.log(result.data)
                this.goodList=result.data.result;
              }).catch(function (err) {
              console.log("err init"+err)
            })
          },
          showFilterPop(){
            this.filterBy=true;
            this.overLayFlag=true;
          },
          closePop(){
            this.filterBy=false;
            this.overLayFlag=false;
          },
          setPriceFilter(index){
            this.priceChecked=index;
            this.closePop();
          },
          addCart(productId){
            axios.post("/ytmall/goods/addCart",{
              productId:productId,
              checked:true,
              num:1
            }).then((res)=>{
              console.log(res)
              if (res.status==200) {
                if (res.data.success == true) {
                  this.mdShowCart=true
                } else {
                  alert(res.data.message)
                }
              }else{
                alert("msg:"+res.statusText)
              }
            }).catch((err)=>{
              if (err.response.status==403) {
                this.mdShow=true;
              }else{
                console.log(err.response)
              }
            })
          },
          closeModal(){
            this.mdShow=false
          }
        }
    }
</script>
